<template>
  <section class='f-customer'>
    <p class="f-close" @click="handelBack">
      <van-icon name="cross" size="20px" color="#fff" />
    </p>
    <!-- <iframe style="width:100%;" :style="{'height': currentHeight}" :src="src" frameborder="0"></iframe> -->
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import hexMD5 from "@/utils/md5.min.js"
import { getStore } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      src: "",
      currentHeight: ""
    })

    onMounted(() => {
      state.currentHeight = window.innerHeight - 37 + 'px'

      let userInfo = getStore('USER_INFO')

      let obj = {
        nickName: userInfo.name,
      }
      let accessId = route.query.artificialKey

      let url = `https://ykf-webchat.7moor.com/wapchat.html?accessId=${accessId}&otherParams=${JSON.stringify(obj)}&clientId=${hexMD5(userInfo.userId)}&urlTitle=${userInfo.companyName}&fromUrl=${window.location.origin + window.location.pathname}`
      //   console.log(url)

      // 创建iframe元素
      var iframe = document.createElement("iframe");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("width", "100%");
      iframe.setAttribute("height", state.currentHeight);
      iframe.setAttribute("src", url);

      let dom = document.getElementsByClassName('f-customer')[0]
      dom.appendChild(iframe);
    })

    const handelBack = () => {
      router.go(-1)
    }

    return {
      ...toRefs(state),
      handelBack
    }
  }
}
</script>
<style lang='scss' scoped>
.f-customer {
  position: relative;
  background: linear-gradient(to bottom, #19caa6, #fafafa);
  overflow: hidden !important;
  .f-close {
    position: absolute;
    right: 0px;
    top: 10px;
    background: #19caa6 !important;
    width: 35px;
    height: 60px;
    line-height: 88px;
    z-index: 999999;
    padding-left: 7px;
  }
}
</style>